<template>
  <view>
    <view class="inde-one">
      <image src="../../static/index/123.png" mode=""></image>
      <div class="inone">
        <h3>大树口腔学苑</h3>
        <span>big tree mouth</span>
        <div>crm管理系统</div>
      </div>
      <div class="intwo">
        <h3>使用手机号注册/登录</h3>
        <view>
          <label class="shjih">
            <image src="../../static/index/phone.png" mode=""></image>
            <input maxlength="11" v-model="phone" placeholder="请输入账号">
          </label>
          <label class="shjyzm">
            <image src="../../static/index/duicuo.png" mode=""></image>
            <input type="number" maxlength="6" v-model="code" placeholder="请填写验证码">
            <view class="shjyzm-btn" @click="yanzm()" v-if="!btndisabled">
              发送验证码
            </view>
            <view class="shjyzm-btn" v-else>
              {{btnstr}}
            </view>
          </label>
          <div class="bth">
            <view class="bingling_b">取消</view>
            <view class="bingling_bth" @click="tongling()">提交</view>
          </div>
          <view class="treaty">
            <u-checkbox-group class="treaty-one" @change="boxcheck" v-model="treaty">
              <u-checkbox v-model="treat" shape="circle">阅读并同意</u-checkbox>
            </u-checkbox-group>
            <span>《服务协议》</span>
          </view>
        </view>
      </div>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        treaty: [],
        treat: false,
        phone: '',
        code: '',
        btnstr: '发送验证码',
        btndisabled: false,
      }
    },
    onLoad() {

    },
    methods: {
      async timewait(t) {
        let then = this
        setTimeout(() => {
          if (t >= 0) {
            then.btnstr = t + '重新发送'
            t--;
            then.timewait(t)
          } else {
            then.btnstr = '发送验证码'
            t = 60;
            then.btndisabled = false
          }
        }, 1000)
      },
      async yanzm() {
        uni.hideKeyboard();
        if (!this.phone) {
          uni.$u.toast('请输入手机号')
          return;
        }
        if (!/^1[3456789]\d{9}$/.test(this.phone)) {
          uni.$u.toast("手机号错误")
          return;
        }
        this.timewait(60)
        this.btndisabled = true
        // let res = await this.$api.sms_code(this.phone)
        console.log(res);
        this.$u.toast(res.msg)
      },
      async tongling() {
        uni.navigateTo({
          url:'/pages/user_index/user_index'
        })
      	if (!this.phone) {
      		uni.$u.toast('请输入手机号')
      		return;
      	}
      	if (!/^1[3456789]\d{9}$/.test(this.phone)) {
      		uni.$u.toast("手机号错误")
      		return;
      	}
      	if (!this.code) {
      		uni.$u.toast("请填写验证码")
      		return;
      	}
      	if (!this.treat) {
      		uni.$u.toast("请勾选用户协议")
      	}
      	uni.showLoading()
      	// let res = await this.$api.yzm_login({
      	// 	phone: this.phone,
      	// 	code: this.code
      	// })
      	// this.$u.toast(res.msg)
      	// if (res.code == 200) {
      	// 	uni.setStorageSync('token', res.data.token)
      	// 	uni.setStorageSync('userInfo', res.data.userinfo)
      	// 	// this.show = false
      	// 	uni.hideLoading()
      	// 	location.reload()
      	// }
      },
      boxcheck(e) {
      	console.log(e);
      },
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #eee;
  }

  .inde-one {
    width: 750rpx;
    height: 637rpx;
    position: relative;
    text-align: center;

    image {
      width: 100%;
      height: 100%;

    }

    .inone {
      position: absolute;
      bottom: 230rpx;
      left: 180rpx;

      h3 {
        font-size: 65rpx;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 65rpx;
      }

      span {
        font-size: 22rpx;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 72rpx;
      }

      div {
        margin: auto;
        width: 307rpx;
        height: 36rpx;
        background: #FFFFFF;
        border-radius: 18px;
        font-size: 24rpx;
        font-weight: 400;
        color: #008EFE;
        line-height: 36rpx;
      }
    }
  }

  .intwo {
    position: absolute;
    bottom: -348rpx;
    left: 30rpx;
    width: 691rpx;
    height: 545rpx;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0px 0px 41px 2px rgba(36, 128, 200, 0.17);

    h3 {
      margin-top: 47rpx;
      margin-bottom: 57rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
      line-height: 34rpx;
    }
  }

  .shjih {
    display: flex;
    align-items: center;
    margin: 44rpx 60rpx 33rpx;
    padding: 0rpx 0rpx 35rpx;
    border-bottom: 2rpx solid #e6e6e6;

    image {
      width: 45rpx;
      height: 45rpx;
    }

    input {
      // flex: 1;
      margin: 0 0 0 25rpx;
      line-height: 42rpx;
      color: #282828;
      font-size: 30rpx;
    }
  }

  .shjyzm {
    display: flex;
    align-items: center;
    margin: 44rpx 60rpx 33rpx;
    padding: 0rpx 0rpx 35rpx;
    border-bottom: 2rpx solid #e6e6e6;

    image {
      width: 45rpx;
      height: 45rpx;
    }

    input {
      // flex: 1;
      margin: 0 0 0 25rpx;
      line-height: 42rpx;
      color: #282828;
      font-size: 30rpx;
    }

    .shjyzm-btn {
      font-size: 30rpx;
      color: #2C8EFF;
    }
  }

  .treaty {
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    // justify-content: center;
    padding: 0rpx 54rpx 0rpx;

    .treaty-one {
      // display: inline-block;
    }

    span {
      color: #0590FE;
    }
  }

  .bth {
    display: flex;
    justify-content: space-between;
    // padding: 74rpx;
    padding-left: 74rpx;
    padding-right: 74rpx;

    .bingling_b {
      width: 197rpx;
      height: 65rpx;
      background: #B3B3B3;
      border-radius: 33rpx;
      font-size: 30rpx;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 65rpx;
    }

    .bingling_bth {

      width: 197rpx;
      height: 65rpx;
      background: #0590FE;
      border-radius: 33rpx;
      font-size: 30rpx;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 65rpx;
    }
  }
</style>
